<template>
  <el-form class="right-events">
    <el-button icon="Plus" type="primary" class="margin-left-right-16" @click.stop="onAddEvent">添加事件</el-button>
    <el-collapse v-model="activeEventNames" class="margin-top-10">
      <el-collapse-item v-for="(item, index) in sortEvents" :name="'event-'+index" :key="'event-' + index">
          <template #title>
          事件{{index+1}}<span class="select-animate" @click.stop="onShowSelectEvent($event, item.type)">{{EVENT_HOVER_TYPES[item.type].label}}</span>
          <i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteEvent($event, item)"></i>
          <el-icon class="el-collapse-item__arrow"  @click.stop="onMoveTop($event, item)"><top /></el-icon>
        </template>
        <dropdown-normal v-if="item.mouseBehavior" label="操作方式" :valLists="MOUSE_BEHAVIOR" v-model="item.mouseBehavior" @change="onUpdateEvent($event, item)"></dropdown-normal>
        <event-comp :item="item" :index="index"></event-comp>
        <component :is="item.eventComType" :event="item" :index="index"></component>
      </el-collapse-item>
    </el-collapse>


    <div v-if="computeEventNum > 0 && eventAttr" class="margin-top-20">
      <el-divider content-position="center">结果属性</el-divider>
      <switch-normal v-model="eventAttr.isBreak" label="主事件中断" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="eventAttr.isEmitLoadEvent" label="触发加载事件" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="eventAttr.isEmitInitEvent" label="触发初始化事件" @change="onChangeAttr"></switch-normal>
      <dropdown-normal label="结果类型" :valLists="EVENTS_RESULTS_TYPES" v-model="eventAttr.resultType" @change="onChangeAttr"></dropdown-normal>
      <div v-if="eventAttr.resultType == EVENTS_RESULTS_TYPES_MAP.page">
        <dropdown-normal label="成功页面id" v-model="eventAttr.successPanelId" :valLists="pageNames" @change="onChangeAttr" ></dropdown-normal>
        <dropdown-normal label="失败页面id" v-model="eventAttr.failPanelId" :valLists="pageNames" @change="onChangeAttr" ></dropdown-normal>
        <textarea-normal v-model="eventAttr.params" label="根据错误码配置" @change="onChangeAttr"></textarea-normal>
      </div>
      <div v-else-if="eventAttr.resultType == EVENTS_RESULTS_TYPES_MAP.pop">
        <dropdown-normal label="成功弹层id" v-model="eventAttr.successPanelId" :valLists="popNames" @change="onChangeAttr" ></dropdown-normal>
        <dropdown-normal label="失败弹层id" v-model="eventAttr.failPanelId" :valLists="popNames" @change="onChangeAttr" ></dropdown-normal>
        <textarea-normal v-model="eventAttr.params" label="根据错误码配置" @change="onChangeAttr"></textarea-normal>
      </div>
      <div v-else-if="eventAttr.resultType == EVENTS_RESULTS_TYPES_MAP.component">
        <dropdown-normal label="关联事件" :valLists="getEventList" v-model="eventAttr.eventType" @change="onChangeAttr"></dropdown-normal>
        <input-normal label="成功组件id" v-model="eventAttr.successCompId" @change="onChangeAttr"></input-normal>
        <input-normal label="失败组件id" v-model="eventAttr.failCompId" @change="onChangeAttr"></input-normal>
        <textarea-normal v-model="eventAttr.params" label="根据错误码配置" @change="onChangeAttr"></textarea-normal>
      </div>
      <div v-else-if="eventAttr.resultType == EVENTS_RESULTS_TYPES_MAP.jump">
        <input-normal label="跳转链接" v-model="eventAttr.link" @change="onChangeAttr"></input-normal>
      </div>
      <div v-else class="margin-left-right-16 red">
        与后端通信后不提示任何信息
      </div>
    </div>
  </el-form>
</template>

<script>

import { mapActions, mapState, mapGetters } from 'vuex'
import { MOUSE_BEHAVIOR, EVENTS_RESULTS_TYPES, EVENTS_RESULTS_TYPES_MAP, COMPONENT_TYPES } from '@/common/const'
import { EVENT_HOVER_TYPES } from '@/common/events'
import { PAGE_TYPE_ } from '@/common/const'
import { HIDDEN_EVENT_TABS } from '@/common/const-wb'
import InputNormal from '@/views/components/edit/InputNormal.vue'
import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
import EventComp from '@/views/components/event-comp.vue'
import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'
import SwitchButton from '@/views/components/switch-button.vue'
import AddEventReposts from '@/views/events/add-event-reposts.vue'
import AddEventSubmit from '@/views/events/add-event-submit.vue'
import AddEventLink from '@/views/events/add-event-link.vue'
import AddEventFrontEvents from '@/views/events/add-event-front-events.vue'
import AddEventSaveImg from '@/views/events/add-event-save-img.vue'
import AddEventVote from '@/views/events/add-event-vote.vue'
import AddEventNumber from '@/views/events/add-event-number.vue'
import AddEventNumberDayExists from '@/views/events/add-event-number-day-exists.vue'
import AddEventPush from '@/views/events/add-event-push.vue'
import AddEventRepost from '@/views/events/add-event-repost.vue'
import AddEventMsg from '@/views/events/add-event-msg.vue'
import AddEventPraise from '@/views/events/add-event-praise.vue'
import AddEventUser from '@/views/events/add-event-user.vue'
import AddEventFollow from '@/views/events/add-event-follow.vue'
import AddEventPacket from '@/views/events/add-event-packet.vue'
import AddEventLottery from '@/views/events/add-event-lottery.vue'
import AddEventRankFriend from '@/views/events/add-event-rank-friend.vue'
import AddEventJudgeRightWrong from '@/views/events/add-event-judge-right-wrong.vue'
import AddEventActivityInfo from '@/views/events/add-event-activity-info.vue'
import AddEventGeneral from '@/views/events/add-event-general.vue'
import AddEventGeneralNum from '@/views/events/add-event-general-num.vue'
import AddEventTimer from '@/views/events/add-event-timer.vue'
// import AddEventSite from '@/views/events/add-event-site'
// import AddEventCustomUser from '@/views/events/add-event-custom-user'
import AddEventRotate3d from '@/views/events/add-event-rotate3d.vue'
import AddEventInteractionData from '@/views/events/add-event-interaction-data.vue'


export default {
  name: "RightEvents",
  components: {
    DropdownNormal,
    InputNormal,
    EventComp,
    SwitchNormal,
    TextareaNormal,
    SwitchButton,

    AddEventReposts,

    AddEventSubmit,
    AddEventLink,
    AddEventFrontEvents,
    AddEventSaveImg,

    AddEventVote,
    AddEventNumber,
    AddEventNumberDayExists,
    AddEventPush,
    AddEventRepost,
    AddEventMsg,
    AddEventPraise,
    AddEventFollow,
    AddEventPacket,
    AddEventLottery,
    AddEventRankFriend,
    AddEventJudgeRightWrong,
    AddEventUser,
    AddEventActivityInfo,
    AddEventGeneral,
    AddEventGeneralNum,
    AddEventTimer,
    // AddEventSite,
    // AddEventCustomUser,
    AddEventRotate3d,
    AddEventInteractionData,
  },
  setup () {
    return {
      MOUSE_BEHAVIOR: MOUSE_BEHAVIOR,
      EVENT_HOVER_TYPES: EVENT_HOVER_TYPES,
      activeEventNames:['event-0'],
      EVENTS_RESULTS_TYPES: EVENTS_RESULTS_TYPES,
      EVENTS_RESULTS_TYPES_MAP: EVENTS_RESULTS_TYPES_MAP,
      PAGE_TYPE_: PAGE_TYPE_,
      isDebug: process.env.NODE_ENV === 'production' ? false : true,
    }
  },
  computed: {
    ...mapState({
      componentData: (state) => state.components.currentComponentData,
      events: (state) => _.cloneDeep(state.components.currentComponentData.events),
      eventAttr: (state) => _.cloneDeep(state.components.currentComponentData.eventAttr),
    }),
    ...mapGetters("components", {
      pages: "getH5Pages",
      pops: "getPopPages"
    }),
    getEventList(){
      let lists = []
      _.forEach(this.events, (event) => {
        lists.push({name: EVENT_HOVER_TYPES[event.type].label, value: event.type})
      })
      return lists
    },
    sortEvents(){
      let tempArr = [];
      tempArr = _.sortBy(this.events, (event) => { return event.index; });
      return tempArr;
    },
    isDisplayEventTab(){
      if(HIDDEN_EVENT_TABS.indexOf(parseInt(this.componentData.cid)) != -1){
        return false
      }else{
        return true
      }
    },
    pageNames() {
      let pageNames_ = [];
      pageNames_.push({name:"无", value: -1});

      _.forEach(this.pages, (page, index) => {
        pageNames_.push({name: '页面-' + (index+1), value: (index+1)});
      })

      return pageNames_;
    },
    popNames(){
      let popNames_ = [];
      popNames_.push({name:"无", value: -1});
      _.forEach(this.pops, (pop, index) =>{
        popNames_.push({name: '弹层-' + (index+1), value: (index+1)})
      })
      return popNames_;
    },
    computeEventNum(){
      let eventNum = 0;
      _.forEach(this.events, event => {
        if(event.controlId && event.controlId.length > 0 ){
          eventNum++;
        }
      })
      return eventNum;
    }
  },
  methods: {
    ...mapActions({
      updateEvent: "components/updateEvent",
      deleteEvent: "components/deleteEvent",
      changeEventIndex: "components/changeEventIndex",
      changeSelectEventPlane: "changeSelectEventPlane",
      updateCurrentComponentData: "components/updateCurrentComponentData",
    }),
    onChangeAttr(){
      this.updateCurrentComponentData({eventAttr: this.eventAttr});
    },
    showAlert(content) {
      this.$dialog.alert({
        title: '',
        message: content,
      })
    },
    onAddEvent(){
      if(this.componentData.cid == COMPONENT_TYPES.group_component){
        this.showAlert("打组组件不能添加事件！！！")
        return
      }
      let eventNum = this.computeEventNum;
      if(eventNum > 4){
        this.showAlert("最多只能添加5个事件哦！！！")
      }else{
        this.changeSelectEventPlane({isActive: true, type: ''});
      }
    },
    onUpdateEvent(e, item) {
      this.updateEvent({type:item.type, event:item});
    },
    onDeleteEvent(e, item){
      e.stopPropagation();
      e.preventDefault();
      this.deleteEvent({type: item.type, controlId: item.controlId});
    },
    onShowSelectEvent(e, type){
      e.stopPropagation();
      e.preventDefault();
      this.changeSelectEventPlane({isActive: true, type});
    },
    onMoveTop(e, item){
      e.stopPropagation();
      e.preventDefault();
      this.changeEventIndex({eventIndex:item.index})
    }
  },

};
</script>
